<template>
  <div>
     <!-- <h1>登录页面</h1> -->
     <van-nav-bar title="黑马头条-登录" />
     <van-form @submit="onSubmit">
      <!-- 正则表达式是以/开头/结尾
           想要匹配开头需要使用^
           想要匹配结尾需要使用$
           想要匹配数组需要\d
           想要匹配几到几的数组使用[0-9]
           想要匹配几个{5}

           面试比较常问的正则有哪些
           正则校验手机号(/^1[3-9]\d{9}$/)
           正则校验密码(数字,大小写字母,符号)
           正则校验邮箱 -->
          <van-field
            v-model="formLogin.mobile"
            name="手机号"
            label="手机号"
            placeholder="请填写手机号"
            required
            :rules="[{ required: true, message: '手机号未填写' ,trigger: 'onChange',pattern: /^1[3-9]\d{9}$/}]"
          />
          <van-field
            v-model="formLogin.code"
            type="password"
            name="密码"
            label="密码"
            placeholder="请填写密码"
            required
            :rules="[{ required: true, message: '密码未填写' ,trigger: 'onChange', pattern: /^\d{6}$/}]"
          />
          <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit" :loading='isLoading' :disabled="isLoading" >提交</van-button>
          </div>
      </van-form>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import { Notify } from 'vant'
export default {
  data () {
    return {
      formLogin: {
        mobile: '13888888888',
        code: '246810'

      },
      isLoading: false
    }
  },
  methods: {
    ...mapActions(['asyncLoginAction']),
    async  onSubmit (values) {
      this.isLoading = true
      try {
        await this.asyncLoginAction(this.formLogin)
        this.isLoading = false
        Notify({ type: 'success', message: '登录成功' })
        // 跳转到Layout页面
        this.$router.replace({
          path: '/layout'
        })
        // 路由跳转的方法有两个
        // this.$router.push({})  可以回退 ,有浏览器缓存
        // this.$router.replace({})  不可以回退,相当于浏览器重置
      } catch (err) {
        // console.log(err)
        this.isLoading = false
        Notify({ type: 'warning', message: '手机号或密码错误' })
      }
    }
  }
}
</script>

<style lang="less" scoped>
//     .van-nav-bar{
//    background: #007bff;
// }

// /* /deep/ 就是把data-v-hash值选择器写到类名的前面 */
// /deep/ .van-nav-bar__title{
// color: #fff;
// }
</style>
